<template>
  <div class="showScore">
    <el-card shadow="never" class="showScore-select">
      <!--    输入框盒子-->
      <div class="showScore-inputBar">
        <div class="Select">
          项目名称：
          <el-input class="select-message" v-model="projectName" @change="handleQuery" placeholder="请输入项目名关键字" size="small"
                    clearable/>
          专家名：<el-input class="select-message" v-model="expertName" @change="handleQuery" placeholder="请输入项目名关键字" size="small"
                                     clearable/>
          <el-button type="primary" size="small" class="AddMessage-SelectButton" icon="el-icon-search" @click="handleQuery">查 询</el-button>
        </div>
      </div>
    </el-card>
    <el-card shadow="never" class="showScore-info" >
      <el-table  border stripe :cell-style="cellStyle" :data="showScoreData" v-loading="loading"
                 :header-cell-style="cellStyle">
        <el-table-column  prop="projectName" label="项目名称" show-overflow-tooltip></el-table-column>
        <el-table-column  prop="projectStatus" label="项目状态" show-overflow-tooltip>
          <template v-slot="scope">
            <el-tag :type="statusTagType(scope.row.projectStatus)" >{{statusShowOptions[scope.row.projectStatus]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="expertName" label="评审专家"></el-table-column>
        <el-table-column prop="expertPhone" label="专家联系方式"></el-table-column>
        <el-table-column  prop="score" label="项目评分" show-overflow-tooltip>
        <template v-slot="scope">
          <span style="color: #C0C4CC" v-show="scope.row.score===null">暂无评分</span>
          <el-rate  v-show="scope.row.score" v-model="scope.row.score===null?5:scope.row.score" disabled show-score
                    text-color="#ff9900" :max=5>
          </el-rate>
        </template>
        </el-table-column>
        <el-table-column prop="reviewTime" label="评价时间"></el-table-column>
        <el-table-column label="操作">
          <template v-slot="scope">
            <el-button type="text" size="mini" @click="showMore(scope.row.id)">查看专家评价</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页组件-->
      <el-pagination :page-sizes="[5, 8, 10,20,50]" :page-size="this.pagination.pageSize"
                     :current-page="this.pagination.page" :total="this.pagination.total"
                     layout="total, sizes, prev, pager, next, jumper"
                     @size-change="handleSizeChange" @current-change="handleCurrentChange">
      </el-pagination>
    </el-card>
    <el-dialog :visible.sync="dialog" title="查看专家评价" width="60%" @before-close="handleClose">
        <el-card shadow="never" class="info-detail">
          <div>项目名称：<span>{{moreInfo?moreInfo.projectName:''}}</span></div>
          <div>评审专家：<span>{{moreInfo?moreInfo.expertName:''}}</span></div>
          <div>评审时间：<span>{{moreInfo?moreInfo.reviewTime:''}}</span></div>
          <div>项目评分： <el-rate  v-model="moreInfo===null?0:moreInfo.score" disabled show-score text-color="#ff9900" :max=5>
                      </el-rate>
          </div>
        </el-card>
        <el-card shadow="never" class="detail">
          <div class="ql-editor">
            <p v-html="this.moreInfo?this.moreInfo.detailed:''"></p>
          </div>
        </el-card>
    </el-dialog>
  </div>
</template>
<script>
import { showMoreInfo, ShowScorePage } from '@/request/score/score-api'

export default {
  created () {
    this.init()
  },
  data () {
    return {
      projectName:null,
      expertName:null,
      statusOptions: [
        {
          value: '0',
          label: '已登记'
        },
        {
          value: '1',
          label: '已设置条件,未抽取'
        },
        {
          value: '2',
          label: '已抽取'
        },
        {
          value: '3',
          label: '待评审'
        },
        {
          value: '4',
          label: '已评审'
        },
        {
          value: '5',
          label: '抽取失败'
        },
        {
          value: '6',
          label: '已取消'
        },
      ],
      statusShowOptions: ['已登记', '已设置条件,未抽取', '已抽取', '待评审', '已评审', '抽取失败', '已取消'],
      statusTagTypes: ['', '', 'warning', 'warning', 'success', 'danger', 'info'],
      pagination: {
        page: 0,
        pageSize: 10,
        total: 0
      },
      showScoreData:[],
      loading:false,
      moreInfo:null,
      dialog:false
    }
  },
  methods: {
    async init () {
      this.loading=true
      const param = {
        page: this.pagination.page,
        pageSize: this.pagination.pageSize,
        projectName: this.projectName ? this.projectName : undefined,
        expertName: this.expertName ? this.expertName : undefined
      }
      let res = await ShowScorePage(param)
      if (res&&res.code===200){
        this.showScoreData=res.data.records
        this.pagination.total = res.data.total
      }else {
        this.$message.error(res.msg?res.msg:"初始化数据失败")
      }
      this.loading=false
    },
    handleClose(){
      this.dialog=false
      this.moreInfo=null
    },
    //查询功能
    handleQuery () {
      this.pagination.page = 1
      this.init()
    },
    //处理pageSize变化
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.init()
    },
    //处理page变化
    handleCurrentChange (val) {
      this.pagination.page = val
      this.init()
    },
    //返回状态的标签样式
    statusTagType(status){
      return  this.statusTagTypes[status]
    },
    async showMore (id) {
      let res = await showMoreInfo(id)
      if (res&&res.code===200){
        this.moreInfo=res.data
        this.dialog=true
      }else {
        this.$message.error("获取信息失败")
      }
    },
    //处理表格内容居中
    cellStyle(){
      return "text-align:center"
    },
  }
}
</script>
<style scoped lang="less">
.showScore {
  .showScore-select {
    margin-bottom: 10px;

    .showScore-inputBar {
      font-size: 14px;

      .Select {
        .select-message {
          width: 150px;
          margin-right: 20px;
        }
      }
    }
  }
  .showScore-info{
    .el-pagination {
      text-align: center;
      margin: 15px;
    }
  }
}

.info-detail{
  display: flex;
  div{
    margin-right: 50px;;
    display: inline-block;
    span{
      color: #ff9900;
    }
  }
}
.detail{
  margin-top: 20px;
  height: 300px;
  overflow-y: scroll;
}
</style>
